<template>
	<view class="filter">
		<view class="toper">
			<view>快速锁定你想要的专利</view>
		</view>
		<view class="content">
			<view class="tagBox">
				<view class="tag">按金额(元)</view>
				<view class="listBox flex-row">
					<view class="list" :class="{'active':listIndex==index}" @click="checkIndex(item,index)" v-for="(item,index) in list" :key="index">{{item.title}}</view>
				</view>
			</view>
			<view class="tagBox">
				<view class="tag">按领域</view>
				<view class="listBox flex-row">
					<view class="lists" :class="{'active':areaIndex==index}" @click="checkArea(item,index)" v-for="(item,index) in areaList" :key="index">{{item.title}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				list:[
					{title:'0-5000 ',id:'0-5000'},
					{title:'5001-2W',id:'5001-20000'},
					{title:'2W-5W',id:'20000-50000'},
					{title:'5W-10W',id:'50000-100000'},
					{title:'10W-50W',id:'100000-500000'},
					{title:'50W-100W',id:'500000-1000000'},
					{title:'100W以上',id:'1000000-9999999'}
					],
				listIndex:0,
				areaList:[
					{title:'电子信息技术   ',id:1},
					{title:'生物与新医药技术 ',id:2},
					{title:'航空航天技术 ',id:3},
					{title:'新材料技术 ',id:4},
					{title:'高技术服务业 ',id:5},
					{title:'新能源及节能技术 ',id:6},
					{title:'资源与环境技术 ',id:7},
					{title:'高新技术改造传统产业 ',id:8},
					{title:'其他 ',id:9}
					],
				areaIndex:0,
				amounts:'0-5000',
				field:'电子信息技术'
			}
		},
		methods:{
			checkIndex(item,index){
				this.listIndex = index
				this.amounts = item.id
			},
			checkArea(item,index){
				this.areaIndex = index
				this.field = item.title
			},
			onNavigationBarButtonTap(e){
				console.log(e)
				uni.showToast({
					icon:"none",
					title:"点击了确定"
				})
			
				this.$api.prePage().setData( this.amounts,this.field)
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.filter{
		.toper{
			padding:20upx 32upx ;
			font-size: 24upx;
			color: #FD580A;
			background:rgba(253,88,10,0.1);
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20upx;
		}
		.content{
			padding: 39upx 30upx;
			background: #Fff;
			.tagBox{
			.tag{
				color: #33333B;
				font-size: 28upx;
			}
			.listBox{
				padding: 32upx 0;
				flex-wrap: wrap;
				.list{
					// float: left;
					margin-right: 40upx;
					margin-bottom: 30upx;
					width:180upx;
					height:56upx;
					border:1upx solid rgba(204,204,209,1);
					opacity:0.8;
					border-radius:8upx;
					font-size: 26upx;
					color: #9999A1;
					line-height: 56upx;
					text-align: center;
				}
				.lists{
					// float: left;
					margin-right: 40upx;
					margin-bottom: 30upx;
					width:288upx;
					height:56upx;
					border:1upx solid rgba(204,204,209,1);
					opacity:0.8;
					border-radius:8upx;
					font-size: 26upx;
					color: #9999A1;
					line-height: 56upx;
					text-align: center;
				}
				.active{
					background:rgba(253,88,10,0.1);
					color: #FD580A;
					border: 1upx solid rgba(253,88,10,0.1);
				}
				
			}
			}
		}
	}
</style>
